<template>
  <div class="NavBar" :class="{ transparent, [theme]: true, fixed, reverse }">
    <div class="bd" :style="{ position: position }">
      <div class="left">
        <slot class="left" name="left">
          <a
            href="javascript:;"
            class="arrow-left"
            :class="{ 'reverse-arrow-left': reverse }"
            @click="handleClick"
          >
            <i
              class="icon icon-arrow-left"
              :class="{ 'icon-reverse-arrow-left': reverse }"
            />
          </a>
        </slot>
      </div>
      <slot name="title">
        <h1>{{ title }}</h1>
      </slot>
      <div class="right">
        <slot name="right" />
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "NavBar",
  props: {
    title: String,
    reverse: {
      type: Boolean,
      default: false
    },
    theme: {
      type: String,
      default: "default"
    },
    transparent: {
      type: Boolean,
      default: false
    },
    position: {
      type: String,
      default: "fixed"
    },
    back: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      fixed: false
    };
  },
  beforeDestroy() {
    window.removeEventListener("scroll", this.handleScroll);
  },
  mounted() {
    window.addEventListener("scroll", this.handleScroll);
  },
  methods: {
    handleClick() {
      console.log(window.history.length);
      if (this.back) {
        this.$router.push(this.back);
      } else {
        this.$router.back();
      }
    },
    handleScroll() {
      const scrollTop =
        document.documentElement.scrollTop || document.body.scrollTop;
      if (scrollTop) {
        this.fixed = true;
      } else {
        this.fixed = false;
      }
    }
  }
};
</script>
<style lang="less" scoped>
.NavBar {
  height: 45px;
  .bd {
    height: 45px;
    width: 100%;
    z-index: 100000;
    top: 0;
    background-image: linear-gradient(to right, #fc8cbf, #ff83a6);
    color: #fff;
  }

  &.reverse {
    .bd {
      color: #202020;
    }
  }

  &.red {
    .bd {
      background-image: none;
      background-color: #f65550;
    }
  }

  &.transparent {
    height: 0;
    .bd {
      background-image: none;
      background-color: transparent;
    }
  }

  &.fixed {
    .bd {
      background-image: linear-gradient(to right, #fc8cbf, #ff83a6);
      color: #fff;
    }
  }
}
.arrow-left {
  display: block;
  width: 45px;
  height: 45px;
  .icon-arrow-left {
    position: absolute;
    top: 50%;
    left: 30%;
    transform: translate(-50%, -50%);
  }
}

h1 {
  font-size: 17px;
  line-height: 17px;
  text-align: center;
  padding: 14px 36px;
  height: 45px;
  box-sizing: border-box;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.left,
.right {
  position: absolute;
  top: 50%;
  padding-top: 02px;
  transform: translate(0, -50%);
  font-size: 10px;
  line-height: 10px;
}
.left {
  left: 08px;
}
.right {
  right: 08px;
}
</style>
